<template>
  <div class="container">
    <div class="w1420">
      <div class="ad-img" v-if="!topBottomShow">
        <img :src="adImg" alt @click="gotoApply" />
      </div>
      <div class="title-box flexRow Xbetween Yend" v-if="!topBottomShow">
        <div class="left">
          <div class="title">证书查询</div>
          <div class="code">证书编号：{{ number }}</div>
        </div>
        <div class="right">
          <el-button
            class="btn"
            type="primary"
            :loading="loading"
            :disabled="loading"
            @click="download"
            >下载PDF</el-button
          >
          <!-- <div class="btn pointer"></div> -->
        </div>
      </div>
      <div
        class="content-box"
        :style="topBottomShow ? 'padding: 0;width: 1300px;margin: 0 auto' : ''"
      >
        <div class="bg">
          <div class="logo flexRow Xbetween">
            <img
              v-for="(item, index) in info.style.logo"
              :key="index"
              :src="item"
              alt
            />
          </div>
          <div class="title">{{ info.style.title }}</div>
          <div class="en-title">{{ info.style.en_title }}</div>
          <div class="main-title">获奖证书</div>
          <div class="en-main-title">Certificate of Award</div>
          <div class="award-box">
            <div class="item flexRow">
              <div class="label">
                <div class="cn">获奖项目:</div>
                <div class="en">Project Winners</div>
              </div>
              <div class="value">{{ info.title }}</div>
            </div>
            <div class="item flexRow">
              <div class="label">
                <div class="cn">获奖者:</div>
                <div class="en">Prize Winners</div>
              </div>
              <div class="value">{{ info.name }}</div>
            </div>
            <div class="item nomb flexRow">
              <div class="label">
                <div class="cn">获奖等级:</div>
                <div class="en">Class of Prize</div>
              </div>
              <div class="value">{{ info.awards }}</div>
            </div>
          </div>
          <div class="seal-box flexRow Xbetween">
            <div
              class="item flexRow Xcenter"
              v-for="(item, index) in info.style.seal"
              :key="index"
            >
              <div class="bg flexCol Xcenter">
                <div class="cn">{{ item.title }}</div>
                <div class="en">{{ item.en_title }}</div>
              </div>
              <img :src="item.img" alt />
            </div>
          </div>
          <div class="code">
            <div class="item flexRow">
              <div class="label">
                <div class="cn">证书编号:</div>
                <div class="en">Certificate No</div>
              </div>
              <div class="value">{{ number }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ad } from '../../api/home'
import { findcertificate } from '../../api/detail'
import { downloadFile } from '../../utils/auth'
export default {
  data() {
    return {
      adImg: '',
      info: {
        style: {}
      },
      loading: false
    }
  },
  computed: {
    number() {
      return this.$route.query.number
    },
    topBottomShow() {
      return this.$route.query.topBottomShow
    }
  },
  mounted() {
    this.getAd()
    this.getDetail()
  },
  methods: {
    // 推广图
    getAd() {
      ad({
        type: 'top'
      }).then((res) => {
        this.adImg = res.data.advertisement
      })
    },
    gotoApply() {
      this.$router.push({ path: '/apply' })
    },
    getDetail() {
      findcertificate({ number: this.number }).then((res) => {
        this.info = res.data
      })
    },
    download() {
      this.loading = true
      downloadFile('/index/outPdf', { id: this.info.id })
        .then(() => {
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f7f9fd;
  padding: 30px 0 120px;
  .ad-img {
    text-align: center;
    img {
      width: 100%;
      // height: 250px;
    }
  }
  .title-box {
    margin: 60px 0;
    .title {
      font-size: 48px;
      color: #262626;
    }
    .code {
      font-size: 20px;
      color: #999999;
      margin-top: 41px;
    }
    .btn {
      width: 180px;
      height: 70px;
      text-align: center;
      background: linear-gradient(90deg, #3174ff 0%, #12abff 100%);
      box-shadow: 0px 10px 20px 0px rgba(51, 133, 255, 0.3);
      border-radius: 35px;
      font-size: 22px;
      color: #ffffff;
    }
  }
  .content-box {
    background: #ffffff;
    padding: 60px 0;
    > .bg {
      width: 1300px;
      margin: 0 auto;
      background: url('../../assets/img/result-bg.png') no-repeat center center;
      background-size: 100% 100%;
      padding: 200px 0 179px;
      .logo {
        padding-left: 351px;
        padding-right: 342px;
        img {
          width: 190px;
          height: 190px;
        }
      }
      .title {
        font-size: 48px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #e1bf35;
        text-align: center;
        margin: 45px 0 15px;
      }
      .en-title {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #e1bf35;
        text-align: center;
      }
      .main-title {
        font-size: 92px;
        font-family: LiSu;
        color: #d9ab2f;
        text-align: center;
        margin-top: 20px;
      }
      .en-main-title {
        font-size: 34px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #e1bf35;
        text-align: center;
      }
      .award-box {
        padding: 103px 190px 62px;
        .item {
          font-size: 44px;
          font-family: DFPSongW7-GB;
          color: #222222;
          margin-bottom: 119px;
          &.nomb {
            margin-bottom: 0;
          }
          .label {
            .en {
              font-size: 28px;
              font-family: PingFang SC;
              font-weight: 500;
            }
          }
        }
      }
      .seal-box {
        padding: 0 120px;
        .item {
          position: relative;
          flex: 1;
          text-align: center;
          .bg {
            position: absolute;
            height: 270px;
            .cn {
              font-size: 32px;
              font-family: Source Han Serif CN;
              font-weight: bold;
              color: #222222;
            }
            .en {
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #222222;
            }
          }
          img {
            width: 270px;
            height: 270px;
          }
        }
      }
      .code {
        padding-left: 305px;
        .item {
          font-size: 32px;
          font-family: DFPSongW7-GB;
          color: #222222;
          .label {
            .en {
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>